
<!DOCTYPE html>
<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<meta name="description" content="">
		<meta name="author" content="">

		<title>Dashboard Template for Bootstrap</title>
		<!-- Bootstrap core CSS -->
		<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
		<!-- Custom styles for this template -->
		<link th:href="@{/css/dashboard.css}" rel="stylesheet">
		<style type="text/css">
			/* Chart.js */
			
			@-webkit-keyframes chartjs-render-animation {
				from {
					opacity: 0.99
				}
				to {
					opacity: 1
				}
			}
			
			@keyframes chartjs-render-animation {
				from {
					opacity: 0.99
				}
				to {
					opacity: 1
				}
			}
			
			.chartjs-render-monitor {
				-webkit-animation: chartjs-render-animation 0.001s;
				animation: chartjs-render-animation 0.001s;
			}
		</style>
	</head>

	<body>
	<script type="text/javascript" th:src="@{/js/jquery-3.6.0.js}"></script>
	<div th:replace="~{commons/commons::topbar}"></div>

		<div class="container-fluid">
			<div class="row">
				<div th:replace="~{commons/commons::sidebar(active='list.html')}"></div>

				<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
<!--					<button   class="btn btn-sm btn-success" data-toggle="modal" data-target="#myModal">添加员工</button>-->
					<!-- 模态框（Modal） -->
<!--					<div class="modal fade bs-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">-->
<!--						<div class="modal-dialog modal-lg">-->
<!--								<div class="modal-content">-->
<!--									<form th:action="@{/empAdd}" method="post">-->
<!--								<div class="modal-header">-->
<!--									<button type="button" class="close" data-dismiss="modal"-->
<!--											aria-hidden="true">×</button>-->
<!--								</div>-->
<!--								<div class="modal-body">-->



<!--										<div class="form-group">-->
<!--											<label>LastName</label>-->
<!--											<input  type="text" name="EmployeeLastName" class="form-control" >-->
<!--										</div>-->
<!--										<div class="form-group">-->
<!--											<label>Email</label>-->
<!--											<input  type="email" name="EmployeeEmail" class="form-control" placeholder="1176244270@qq.com">-->
<!--										</div>-->
<!--										<div  class="form-group">-->
<!--											<label>Gender</label><br>-->
<!--											<div class="form-check form-check-inline">-->
<!--												<input class="form-check-input" type="radio" name="EmployeeGender" value="1">-->
<!--												<label class="form-check-label">男</label>-->
<!--											</div>-->
<!--											<div class="form-check form-check-inline">-->
<!--												<input class="form-check-input" type="radio" name="EmployeeGender" value="0">-->
<!--												<label class="form-check-label">女</label>-->
<!--											</div>-->
<!--										</div>-->
<!--										<div class="form-group">-->
<!--											<label>department</label>-->
<!--											<select  class="form-control" name="department.deptId">-->
<!--												<option th:each="dept:${departments}" th:text="${dept.getDeptName()}" th:value="${dept.getDeptId()}"></option>-->

<!--											</select>-->
<!--										</div>-->
<!--										<div class="form-group">-->
<!--											<label>birth</label>-->
<!--											<input  type="text" name="birth" class="form-control" placeholder="海绵宝宝">-->
<!--										</div>-->



<!--								</div>-->
<!--								<div class="modal-footer">-->
<!--									<button type="submit" class="btn btn-primary">-->
<!--										提交-->
<!--									</button>-->
<!--									<button type="button" class="btn btn-default"-->
<!--											data-dismiss="modal">关闭-->
<!--									</button>-->
<!--								</div></form>-->
<!--							</div>&lt;!&ndash; /.modal-content &ndash;&gt;-->
<!--						</div>&lt;!&ndash; /.modal-dialog &ndash;&gt;-->
<!--					</div>&lt;!&ndash; /.modal &ndash;&gt;-->


					<div>
						<!-- 模态框（Modal） -->
						<div class="modal fade bs-example-modal-lg" id="mymdal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
							<div class="modal-dialog modal-lg">
								<div class="modal-content">
									<!--表单-->
									<form th:action="@{/updatePlace}" method="post">
										<div class="modal-header">
											<!--场地号码-->
											<h1 id="place"></h1>
											<button type="button" class="close" data-dismiss="modal"
													aria-hidden="true">×</button>
										</div>
										<div class="modal-body">



											<div class="form-group">
												<!--场地id-->
												<input id="id" name="placeId" type="hidden">
												<h2>场地状态</h2>
												<select id="placeStatus"name="placeStatus" class="form-control">
													<option value="空闲"  selected>空闲</option>
													<option value="使用中">使用中</option>
													<option value="不可用">不可用</option>
													<option value="被预定">被预定</option>
												</select>
												<h2>创建时间</h2>
<!--												<input id="useStartTime" name="useStartTime" class="form-control">-->
												<input id="placeUser" name="placeUser" type="hidden">
<!--												<input id="LastName" type="text" name="EmployeeLastName" class="form-control" >-->
<!--											</div>-->
<!--											<div class="form-group">-->
<!--												<label>Email</label>-->
<!--												<input id="Email" type="email" name="EmployeeEmail" class="form-control" placeholder="1176244270@qq.com">-->
<!--											</div>-->
<!--											<div id="gender" class="form-group">-->
<!--												<label>Gender</label><br>-->
<!--												<div class="form-check form-check-inline">-->
<!--													<input id="1" class="form-check-input" type="radio" name="EmployeeGender" value="1">-->
<!--													<label class="form-check-label">男</label>-->
<!--												</div>-->
<!--												<div class="form-check form-check-inline">-->
<!--													<input id="0" class="form-check-input" type="radio" name="EmployeeGender" value="0">-->
<!--													<label class="form-check-label">女</label>-->
<!--												</div>-->
<!--											</div>-->
<!--											<div class="form-group">-->
<!--												<label>department</label>-->
<!--												<select id="employeeDeptName" class="form-control" name="department.deptId">-->
<!--													<option th:each="dept:${departments}" th:text="${dept.getDeptName()}" th:value="${dept.getDeptId()}"></option>-->
<!--												</select>-->
<!--											</div>-->

<!--											<div class="form-group">-->
<!--												<label>birth</label>-->
<!--												<input id="employeeBirth"  type="text" name="birth" class="form-control" placeholder="海绵宝宝">-->
											</div>
										</div>
										<div class="modal-footer">
											<button type="submit" class="btn btn-primary">
												提交
											</button>
											<button type="button" class="btn btn-default"
													data-dismiss="modal">关闭
											</button>
										</div></form>
								</div><!-- /.modal-content -->
							</div><!-- /.modal-dialog -->
						</div><!-- /.modal -->

					</div>

					<div class="table-responsive">
						<table class="table table-striped table-sm">
							<thead>
								<tr>
									<th>场地编号</th>
									<th>场地状态</th>
									<th>操作用户</th>
									<th>创建时间</th>
									<th>剩余时间</th>
									<th>操作</th>
								</tr>
							</thead>
							<tbody>
								<tr th:each="Place:${Places}">
									<td  id="employeeId" th:text="${Place.getPlaceNum()}"></td>
									<td id="employeeLastName" th:text="${Place.getPlaceStatus()}"></td>
									<td id="employeeEmail" th:text="${Place.getPlaceUser()}"></td>
									<td id="employeeGender" th:text="${#dates.format(Place.getUseStartTime(),'yyyy/MM/dd HH:mm')==('1990/01/01 00:00')?'':#dates.format(Place.getUseStartTime(),'yyyy/MM/dd HH:mm')}"></td>
									<td >1</td>
									<td>
										<a class="btn btn-sm btn-primary" th:onclick="'javascript:update('+${Place.getPlaceId()}+');'" >编辑</a>
<!--										<a class="btn btn-sm btn-primary" th:href="@{|/updatePlace/${Place.getPlaceId()}|}" >编辑</a>-->
<!--										<a class="btn btn-sm btn-danger" th:onclick="'javascript:del('+${emp.getEmployeeId()}+');'">删除</a>-->
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</main>
			</div>
		</div>
	<a style="visibility: hidden" id="m" data-toggle="modal" href="#mymdal" class=" btn btn-primary" >点击</a>
		<!-- Bootstrap core JavaScript
    ================================================== -->
		<!-- Placed at the end of the document so the pages load faster -->
		<script type="text/javascript" th:src="@{/js/popper.min.js}"></script>
		<script type="text/javascript" th:src="@{/js/bootstrap.min.js}"></script>

		<!-- Icons -->
		<script type="text/javascript" th:src="@{/js/feather.min.js}"></script>
		<script>
			feather.replace()
		</script>
	<script>
		//封装时间格式
		function format(time, format) {
			var t = new Date(time);
			var tf = function (i) {
				return (i < 10 ? '0' : '') + i
			};
			return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function (a) {
				switch (a) {
					case 'yyyy':
						return tf(t.getFullYear());
						break;
					case 'MM':
						return tf(t.getMonth() + 1);
						break;
					case 'mm':
						return tf(t.getMinutes());
						break;
					case 'dd':
						return tf(t.getDate());
						break;
					case 'HH':
						return tf(t.getHours());
						break;
					case 'ss':
						return tf(t.getSeconds());
						break;
				}
			})
		}
	</script>


		<script type="text/javascript" th:inline="javascript">
			function del(id){
				var basePath = [[${#httpServletRequest.getScheme() + "://" + #httpServletRequest.getServerName() + ":" + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()}]];
				$.ajax({
					url:basePath + '/empDel',
					type: "GET",
					data: {'id':id},
					contentType: "application/json;charset=utf-8",
					success: function () {
						window.location.reload();
					},
					error(){

					}
				});
			}
		</script>

		<script type="text/javascript" th:inline="javascript">
			function update(id){
				var basePath = [[${#httpServletRequest.getScheme() + "://" + #httpServletRequest.getServerName() + ":" + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()}]];
				$.ajax({
					url:basePath + '/toUpdatePlace',
					type: "GET",
					data: {'id':id},
					dataType: "json",
					contentType: "application/json;charset=utf-8",
					success: function (data) {
						//console.log(data.updatePlace.placeArenaId)
						// console.log(data);
						// //$('#LastName').val(data.sb.employeeId);
						$('#id').val(id);
						$('#place').text(data.updatePlace.placeNum);
						$('#placeUser').val("管理员"+[[${session.loginUser}]]);
						console.log(data.updatePlace.placeNum);
						// $('#Email').val(data.sb.employeeEmail);
						// if(data.sb.employeeGender==1){
						// 	$('#1').prop( "checked", true );
						// }
						// else{
						// 	$('#0').prop( "checked", true );
						// }
						// //$('#employeeDeptName').find("option:selected").attr(data.sb.department.deptName);
						// $('#employeeDeptName option').filter(function(){return $(this).text()==data.sb.department.deptName;}).attr("selected",true);
						// var getDate1=data.sb.birth;
					    //       var result2=format(getDate1,'yyyy-MM-dd');
					    //      console.log(result2);            //输出2017-10-30
						// $('#employeeBirth').val(result2);
						// //alert(data.sb.birth);
						// //alert(data.sb.department.deptName);
						// //$("#employeeDeptName option:contains(data.sb.department.deptName)").attr('selected', true);
						//
						document.getElementById("m").click();
						},
					error(){
						console.log("sb")
					}
				});
			}
		</script>


		<!-- Graphs -->
		<script type="text/javascript" th:src="@{/js/Chart.min.js}"></script>
		<script>
			var ctx = document.getElementById("myChart");
			var myChart = new Chart(ctx, {
				type: 'line',
				data: {
					labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
					datasets: [{
						data: [15339, 21345, 18483, 24003, 23489, 24092, 12034],
						lineTension: 0,
						backgroundColor: 'transparent',
						borderColor: '#007bff',
						borderWidth: 4,
						pointBackgroundColor: '#007bff'
					}]
				},
				options: {
					scales: {
						yAxes: [{
							ticks: {
								beginAtZero: false
							}
						}]
					},
					legend: {
						display: false,
					}
				}
			});
		</script>

	</body>

</html>